---
slug: 本地开发服务器 #路径，不能重复
title: 本地开发服务器 # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---


### 安装webpack-dev-server

```shell
npm install webpack-dev-server -D

```


### 配置文件

```json title="package.json"

{
"scripts": {
    "serve": "webpack server --config webpack.config.js"
  }
}
```

### host/port

> 默认值是localhost，设置成0.0.0.0可以让同一网段都可以访问

> 端口默认是8080

```js title="webpack.config.js"
module.exports = {
    devServer: {
      host: "0.0.0.0",
      port: 3000
    },
}
```


### 开发服务器代理

> 浏览器安全策略不允许浏览器访问外部端口，配置代理


```js title="webpack.config.js"

proxy:[
          {
              context:['/api'],
              target: 'http://localhost:3000',
              pathRewrite: {
                  '^/api': '',
              },
              changeOrigin: true,
          }
      ]
    },
```

#### changeOrigin

> 访问9000地址的后台的前端服务器是8000，则可能被后端的代理服务器校验拦截

**就是将header内部的host转化为9000**


### historyApiFallBack

> 解决spa页面在页面刷新后遇到404的情况

布尔值，刷新时如果返回404错误的话会自动返回index.html

```js title=“webpack.config.js”
{historyApiFallBack:true}

```